import { ThemeMode } from '../stores/themeStore';

// 统一主题配置接口
export interface ThemeConfig {
  // 布局背景色
  layoutBackground: string;
  contentBackground: string;
  
  // 侧边栏样式
  siderBackground: string;
  siderHeaderBackground: string;
  siderBorderColor: string;
  
  // 顶部导航栏样式
  headerBackground: string;
  headerBorderColor: string;
  
  // Logo 和文本颜色
  logoColor: string;
  textPrimary: string;
  textSecondary: string;
  textTertiary: string;
  
  // 装饰效果
  glowColor: string;
  shimmerGradient: string;
  logoGlowGradient: string;
  headerGlowGradient: string;
  
  // 卡片样式
  cardBackground: string;
  cardBorder: string;
  cardShadow: string;
  hoverShadow: string;
  
  // 边框颜色
  borderColor: string;
  
  // 爬虫页面专用颜色
  crawlerPrimary: string;
  crawlerSecondary: string;
  crawlerAccent: string;
  
  // 列表组件样式
  listBackground: string;
  listBorder: string;
  listShadow: string;
  listHoverBackground: string;
  listSelectedItemBackground: string;
  
  // 下拉菜单样式
  dropdownBackground: string;
  dropdownBorderColor: string;
  dropdownShadowColor: string;
  dropdownTextColor: string;
  dropdownHoverBackground: string;
  
  // 输入框样式
  inputBackground: string;
  inputBorderColor: string;
  hoverBackground: string;
  
  // 其他颜色配置
  colors: {
    primary: string;
    secondary: string;
    accent: string;
    background: string;
    text: {
      primary: string;
      secondary: string;
      tertiary: string;
    };
    // 其他颜色配置
  };
}

// 使用 TypeScript 的 keyof 操作符确保类型安全
export const getThemeValue = <T extends keyof ThemeConfig>(
  theme: ThemeConfig,
  key: T
): ThemeConfig[T] => theme[key];

export const themes: Record<ThemeMode, ThemeConfig> = {
  dark: {
    layoutBackground: '#000',
    contentBackground: '#1a1a1a',
    
    siderBackground: 'linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(20,20,20,0.9) 100%)',
    siderHeaderBackground: 'rgba(255, 255, 255, 0.05)',
    siderBorderColor: 'rgba(255, 255, 255, 0.1)',
    
    headerBackground: 'rgba(0, 0, 0, 0.8)',
    headerBorderColor: 'rgba(255, 255, 255, 0.1)',
    
    logoColor: '#61dca3',
    textPrimary: 'rgba(255, 255, 255, 0.8)',
    textSecondary: 'rgba(255, 255, 255, 0.6)',
    textTertiary: 'rgba(255, 255, 255, 0.4)',
    
    glowColor: '#61dca3',
    shimmerGradient: 'linear-gradient(90deg, transparent, #61dca3, transparent)',
    logoGlowGradient: 'linear-gradient(45deg, transparent, rgba(97, 220, 163, 0.1), transparent)',
    headerGlowGradient: 'linear-gradient(90deg, transparent, rgba(97, 220, 163, 0.6), transparent)',
    
    cardBackground: 'rgba(30, 30, 30, 0.8)',
    cardBorder: 'rgba(255, 255, 255, 0.1)',
    cardShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
    hoverShadow: '0 12px 40px rgba(0, 0, 0, 0.4)',
    
    borderColor: 'rgba(255, 255, 255, 0.1)',
    
    // 爬虫页面专用颜色
    crawlerPrimary: '#61dca3',
    crawlerSecondary: '#4caf50',
    crawlerAccent: '#81c784',
    
    // 列表组件样式
    listBackground: 'rgba(30, 30, 30, 0.6)',
    listBorder: 'rgba(255, 255, 255, 0.1)',
    listShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
    listHoverBackground: 'rgba(40, 40, 40, 0.7)',
    listSelectedItemBackground: 'rgba(97, 220, 163, 0.15)',
    
    // 下拉菜单样式
    dropdownBackground: 'rgba(30, 30, 30, 0.95)',
    dropdownBorderColor: 'rgba(255, 255, 255, 0.1)',
    dropdownShadowColor: 'rgba(0, 0, 0, 0.3)',
    dropdownTextColor: 'rgba(255, 255, 255, 0.8)',
    dropdownHoverBackground: 'rgba(255, 255, 255, 0.1)',
    
    // 输入框样式
    inputBackground: 'rgba(30, 30, 30, 0.8)',
    inputBorderColor: 'rgba(255, 255, 255, 0.1)',
    hoverBackground: 'rgba(255, 255, 255, 0.1)',
    
    // 新增颜色配置
    colors: {
      primary: '#61dca3',
      secondary: '#4caf50',
      accent: '#81c784',
      background: '#000',
      text: {
        primary: 'rgba(255, 255, 255, 0.8)',
        secondary: 'rgba(255, 255, 255, 0.6)',
        tertiary: 'rgba(255, 255, 255, 0.4)',
      }
    }
  },
  
  light: {
    layoutBackground: '#f0f2f5', // 保持浅灰背景作为整体布局背景
    contentBackground: '#ffffff', // 内容区域使用纯白色
    
    siderBackground: 'rgba(255, 255, 255, 0.85)', // 侧边栏使用半透明白色，增强毛玻璃效果
    siderHeaderBackground: 'rgba(255, 255, 255, 0.7)', // 侧边栏头部使用更透明白色
    siderBorderColor: 'rgba(0, 0, 0, 0.08)', // 侧边栏边框使用浅灰色
    
    headerBackground: 'rgba(255, 255, 255, 0.9)', // 顶部导航栏使用更透明白色
    headerBorderColor: 'rgba(0, 0, 0, 0.08)', // 顶部导航栏边框使用浅灰色
    
    logoColor: '#1890ff',
    textPrimary: 'rgba(0, 0, 0, 0.85)',
    textSecondary: 'rgba(0, 0, 0, 0.65)',
    textTertiary: 'rgba(0, 0, 0, 0.45)',
    
    glowColor: '#1890ff',
    shimmerGradient: 'linear-gradient(90deg, transparent, #1890ff, transparent)',
    logoGlowGradient: 'linear-gradient(45deg, transparent, rgba(24, 144, 255, 0.1), transparent)',
    headerGlowGradient: 'linear-gradient(90deg, transparent, rgba(24, 144, 255, 0.6), transparent)',
    
    cardBackground: '#ffffff', // 卡片背景使用纯白色
    cardBorder: 'rgba(0, 0, 0, 0.06)', // 卡片边框使用更浅的灰色
    cardShadow: '0 4px 12px rgba(0, 0, 0, 0.08)', // 增强卡片阴影以增强层次感
    hoverShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
    
    borderColor: 'rgba(0, 0, 0, 0.08)', // 通用边框颜色
    
    // 爬虫页面专用颜色
    crawlerPrimary: '#1890ff',
    crawlerSecondary: '#40a9ff',
    crawlerAccent: '#69c0ff',
    
    // 列表组件样式
    listBackground: 'rgba(255, 255, 255, 0.7)',
    listBorder: 'rgba(0, 0, 0, 0.06)',
    listShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
    listHoverBackground: 'rgba(250, 250, 255, 0.8)',
    listSelectedItemBackground: 'rgba(24, 144, 255, 0.15)',
    
    // 下拉菜单样式
    dropdownBackground: 'rgba(255, 255, 255, 0.95)',
    dropdownBorderColor: 'rgba(0, 0, 0, 0.08)',
    dropdownShadowColor: 'rgba(0, 0, 0, 0.1)',
    dropdownTextColor: 'rgba(0, 0, 0, 0.85)',
    dropdownHoverBackground: 'rgba(0, 0, 0, 0.05)',
    
    // 输入框样式
    inputBackground: 'rgba(255, 255, 255, 0.8)',
    inputBorderColor: 'rgba(0, 0, 0, 0.08)',
    hoverBackground: 'rgba(0, 0, 0, 0.05)',
    
    // 新增颜色配置
    colors: {
      primary: '#1890ff',
      secondary: '#40a9ff',
      accent: '#69c0ff',
      background: '#f0f2f5',
      text: {
        primary: 'rgba(0, 0, 0, 0.85)',
        secondary: 'rgba(0, 0, 0, 0.65)',
        tertiary: 'rgba(0, 0, 0, 0.45)',
      }
    }
  },
};

export const getTheme = (mode: ThemeMode): ThemeConfig => themes[mode];